import React, { useEffect, useState } from 'react'

import { Card, Button, Mask } from 'antd-mobile'
import "./seats.less"

import storage from "../../utils/storage"
import { getscreenroominfo_api, butticket_api } from "../../apis/details"


export default function Seats() {
    let movie = storage.getSession('movie');
    let cmInfo = storage.getSession('cmInfo');
    let cmDay = storage.getSession('cmDay');

    let [sroom, setSroom] = useState([]);//座位信息
    let [selSeats, setSelSeats] = useState([]);
    let [isshow, setIsshow] = useState(true);

    useEffect(async () => {
        let res = await getscreenroominfo_api({ sid: cmInfo.id })
        //console.log(res.data.seats);
        setSroom(res.data.seats);
    }, [])

    //我选座
    let selSeat = (val, rowIndex, colIndex) => {
        // console.log(val);//选择的座位
        //console.log(rowIndex, colIndex);//行指数 / 列指数


        if (val.buy === 0) {
            val.buy = 2;
            selSeats.push({ rowIndex: rowIndex + 1, colIndex: colIndex + 1, id: val.id });
            setSelSeats(selSeats);
            //console.log(selSeats);

        } else {
            val.buy = 0;
            selSeats.forEach((item, index) => {
                if (item.id === val.id) {
                    selSeats.splice(index, 1);
                    setSelSeats(selSeats);
                }
            })
        }
        setSroom([...sroom]);//对象重新赋值需要浅拷贝一下

        //console.log(selSeats);
        if (selSeats.length == 0) {
            setIsshow("block");
        } else {
            setIsshow("none");
        }
    }


    let buyTicket = async () => {
        let arrId = selSeats.map((item) => {
            return item.id;
        })

        let res = await butticket_api({
            sid: cmInfo.id,
            seatsidarr: arrId
        })
        if (res.data.code === 1) {
            setVisible(true);
            setTimeout(() => {
                window.location.hash = '/layout';
            }, 500);

        }
    }


    //蒙层
    const [visible, setVisible] = useState(false)
    const WithContent = () => {
        return (
            <>
                <Mask visible={visible} onMaskClick={() => setVisible(false)}>
                    <div className="overlayContent">
                        <h3>√</h3>
                        <p>购票成功</p>
                    </div>
                </Mask>
            </>
        )
    }




    return (
        <div className="seats">
            <img className="seat-img" src={require('../../assets/imgs/seat.jpg').default} alt="" />


            <div className="all-seats">
                <div className="seat-box">
                    {
                        sroom.map((item, index) => {
                            return (
                                <p>{index}</p>
                            )
                        })
                    }
                </div>
                {
                    sroom.map((item, i) => {
                        return (
                            <div className="seats-rows" key={i}>
                                {
                                    item.map((val, j) => {
                                        if (val.seat == 0) {
                                            return (<span key={j}></span>)
                                        } else if (val.buy == 1) {
                                            return (<img src={require('../../assets/imgs/otherSeat.png').default} key={j} />)
                                        } else if (val.buy == 2) {
                                            return (<img onClick={() => { selSeat(val, i, j) }} src={require('../../assets/imgs/mySeat.png').default} key={j} />)
                                        } else {
                                            return (<img onClick={() => { selSeat(val, i, j) }} src={require('../../assets/imgs/emptySeat.png').default} key={j} />)
                                        }
                                    })
                                }
                            </div>
                        )
                    })
                }
            </div>
            <div className="card-content">
                <Card>
                    <h2>{movie.name}</h2>
                    <p><span>{cmDay.split("-")[0]}月{cmDay.split("-")[1]}日</span>&nbsp;<span>{cmInfo.starttime}-{cmInfo.endtime}</span>&nbsp;&nbsp;<em>{cmInfo.name}</em> </p>
                    <p style={{ display: isshow }}>请先选座~</p>
                    <p className="sel-place">
                        {
                            selSeats.map((item, index) => {
                                return (
                                    <span key={index}>{item.rowIndex}排{item.colIndex}列</span>
                                )
                            })
                        }
                    </p>
                </Card>
                <Button onClick={buyTicket}>确认选座</Button>
            </div>
            <div>
                <WithContent />
            </div>
        </div>
    )
}
